<template>
  <div>
    <div>
      <el-table
        :data="consumptionInfoList"
        style="width: 100%"
        height="680"
        >
        <el-table-column
          fixed
          prop="deductionMoney"
          label="金额(￥)"
        >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.deductionMoney }}￥</el-tag>
          </div>
        </template>
        </el-table-column>
        <el-table-column
          prop="deductionInfo"
          label="消费信息(￥)"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="消费时间"
        >
        </el-table-column>
      </el-table>
    </div>
    <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data(){
    return{
      currentPage: 1,
      consumptionInfoList: [{
        deductionMoney: null,
        deductionInfo: null,
        createTime: null
      }],
      pageInfo: {
        endRow: null,
        hasNextPage: false,
        hasPreviousPage: false,
        isFirstPage: true,
        isLastPage: true,
        list: [],
        navigateFirstPage: null,
        navigateLastPage: null,
        navigatePages: null,
        navigatepageNums: [],
        nextPage: null,
        pageNum: null,
        pageSize: null,
        pages: null,
        prePage: null,
        size: null,
        startRow: null,
        total: null,
      },
    }
  },
  beforeCreate(){
    var token = localStorage.getItem("loginToken")
    const pageNum = 1
    const pageSize = 10
    this.$axios({url:'/user/queryDeductionInfo', methods: 'GET',params:{pageNum:pageNum,pageSize:pageSize},headers:{"token":token}})
    .then(res => {
      if(res.data.data != null){
        this.pageInfo = res.data.data
        this.consumptionInfoList = res.data.data.list
      }
    })
    .catch(err => {
    })
  },
  methods: {
    getUserConsumptionInfo(pageNum,pageSize){
      const token = localStorage.getItem("loginToken")
      console.log(pageNum,pageSize)
      this.$axios({url:'/user/queryDeductionInfo', methods: 'GET',params:{pageNum:pageNum,pageSize:pageSize},headers:{"token":token}})
      .then(res => {
        if(res.data.data != null){
          this.pageInfo = res.data.data
          this.consumptionInfoList = res.data.data.list
        }
      })
      .catch(err => {
      })
    },
    handleCurrentChange(pageNum){
      console.log('当前页：'+pageNum)
      this.getUserConsumptionInfo(pageNum,10)
    },
    handleSizeChange(pageSize){
      console.log('每页'+pageSize+'条')
      this.getUserConsumptionInfo(1,pageSize)
    },
  }
}
</script>

<style>

</style>
